<!--  线 + 柱混合图 -->
<template>
  <div class="box">
    <div class="box-title">实时监测</div>
    <div class="data">
      <div class="data-item">
        <div class="data-item-title">当日用水量</div>
        <div class="data-value">1400<span class="data-unit">L</span></div>
      </div>
      <div class="data-item">
        <div class="data-item-title">当日用电量</div>
        <div class="data-value">127<span class="data-unit">kWh</span></div>
      </div>
      <div class="data-item">
        <div class="data-item-title">出水TDS</div>
        <div class="data-value">24<span class="data-unit">ppm</span></div>
      </div>
      <div class="data-item">
        <div class="data-item-title">室内温度</div>
        <div class="data-value">22<span class="data-unit">°C</span></div>
      </div>
      <div class="data-item">
        <div class="data-item-title">室内PM2.5</div>
        <div class="data-value">25<span class="data-unit">ug/m</span></div>
      </div>
      <div class="data-item">
        <div class="data-item-title">环境舒适度</div>
        <div class="data-value">92<span class="data-unit">分</span></div>
      </div>
    </div>

    <div class="small-data">
      <div class="small-data-item">
        <div>室外温度</div>
        <div>12C</div>
      </div>
      <div class="small-data-item">
        <div>室外</div>
        <div>58ug/m</div>
      </div>
    </div>


    <!--折叠面板-->
    <div class="top-panel" :style="'height:'+ topPanelHeight">
      <div class="top-panel-top">
        <div class="left">
          <span class="left-svg"><svg-icon icon-class="alarm"/></span>
          <span class="top-panel-title">实时告警 TOP5</span>
        </div>
        <div @click="topChange" class="right">
          <span v-if="!isTopShow">展开 <svg-icon icon-class="arrow-down"/> </span>
          <span v-if="isTopShow">收起 <svg-icon icon-class="arrow-up"/> </span>
        </div>
      </div>
      <div v-show="isTopShow" class="top-panel-bottom">
        <div class="rank-item">
          <div class="left">开关跳闸预警</div>
          <div class="right">33</div>
        </div>
        <div class="rank-item">
          <div class="left">开关跳闸预警</div>
          <div class="right">33</div>
        </div>
        <div class="rank-item">
          <div class="left">开关跳闸预警</div>
          <div class="right">33</div>
        </div>
        <div class="rank-item">
          <div class="left">开关跳闸预警</div>
          <div class="right">33</div>
        </div>
        <div class="rank-item">
          <div class="left">开关跳闸预警</div>
          <div class="right">33</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
  id: {
    type: String,
    default: "monitor",
  }
});


//监听汉堡按钮的点击 点击了则resize

const isTopShow = ref(false)

const topPanelHeight = ref("60px")

function topChange() {
  isTopShow.value = !isTopShow.value
  topPanelHeight.value = isTopShow.value ? '200px' : '60px'
  console.log(topPanelHeight.value)
}


</script>
<style lang="scss" scoped>
.box {
  position: relative;
  border-radius: 16px;
  padding: 20px 20px;
  background-color: #293030;
  width: 100%;
  height: 100%;

  .box-title {
    font-size: 19px;
    margin-bottom: 5px;
  }

  .data {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .data-item {
      width: 33%;
      margin-bottom: 15px;

      .data-item-title {
        color: #9da9ab
      }

      .data-value {
        font-family: "Dubai Medium";
        font-size: 20px;
        font-weight: 500;
      }

      .data-unit {
        font-size: 14px;
      }
    }
  }

  .small-data {
    display: flex;
    font-size: 12px;

    .small-data-item {
      display: flex;
      align-items: center;
      margin-right: 30px;
    }
  }

  .top-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #3f4847;
    border-radius: 14px;
    padding: 0 20px;
    padding-top: 18px;
    height: v-bind(topPanelHeight);
    transition: all 0.2s;
    .top-panel-top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        .top-panel-title {
          font-size: 16px;
        }

        .left-svg {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }

      .right {
        font-size: 12px;
        color: #9da9ab;
      }

    }

    .top-panel-bottom{
      .rank-item{
        display: flex;
        align-items:center;
        height: 20%;
        justify-content: space-between;
        font-size: 12px;
        align-items: center;
        height: 30px;
        .left{
          color: #9da9ab;
        }
      }
    }


  }
}
</style>
